<template>
  <el-dialog
    title="选择学生"
    :visible.sync="visible"
    @close="onClose"
    @closed="onClosed"
    width="900px"
    center
  >
    <table-filter>
      <slot name="table-filter"> </slot>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <data-table
      @select="onSelect"
      @select-all="onSelectAll"
      @after-load-data="afterLoadData"
      height="500px"
      pagination
      ref="dtb"
      :api-setting="apiSetting"
    >
      <!--            @selection-change="selectChange"-->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        v-for="col in column"
        :prop="col.prop"
        :label="col.label"
        :key="col.prop"
        show-overflow-tooltip
      />
    </data-table>
    <div style="margin-top: 10px;text-align: center">
      <el-button @click="add">添加</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dialog from "../../mixins/component/dialog";
import TableFilter from "../../components/TableFilter";
import tbSearch from "@/mixins/dataTable/tbSearch";

export default {
  name: "SelectStu",
  components: { TableFilter },
  mixins: [dialog, tbSearch],
  props: ["stuList", "apiUrl", "apiParams", "column"],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: this.apiUrl,
        data: this.apiParams
      },
      selectedStu: []
    };
  },
  watch: {
    stuList: {
      immediate: true,
      handler(n) {
        this.selectedStu = n;
      }
    },
    visible(n) {
      n && this.$refs.dtb && this.$refs.dtb.loadData();
    }
  },
  methods: {
    afterLoadData() {
      const dtb = this.$refs.dtb;
      const dtbList = dtb.$data.list;
      const elTable = dtb.$refs.elTable;
      if (!this.selectedStu.length) return;
      this.$nextTick(() => {
        for (let i = 0; i < this.selectedStu.length; i++)
          for (let j = 0; j < dtbList.length; j++) {
            const item = dtbList[j];
            if (this.selectedStu[i] == item.userid) {
              elTable.toggleRowSelection(item);
              break;
            }
          }
      });
    },
    add() {
      this.visible = false;
      this.$emit("update:stuList", this.selectedStu);
    },
    onSelect(selection, row) {
      const { userid } = row;
      const isSelected = selection.map(item => item.userid).includes(userid);
      if (isSelected) this.selectedStu.push(userid);
      else {
        this.selectedStu.splice(this.selectedStu.indexOf(userid), 1);
      }
    },
    onSelectAll(selection) {
      if (selection.length) {
        this.selectedStu = this.concatSelectedStu(selection);
      } else {
        const dtbList = this.$refs.dtb.$data.list;
        for (let i = 0; i < dtbList.length; i++) {
          const item = dtbList[i];
          if (this.selectedStu.indexOf(item.userid.toString()) !== -1)
            this.selectedStu.splice(
              this.selectedStu.indexOf(item.userid.toString()),
              1
            );
        }
      }
    },
    concatSelectedStu(selection) {
      return [
        ...new Set(
          this.selectedStu.concat(selection.map(item => item.userid.toString()))
        )
      ];
    },
    onClosed() {
      this.apiSetting.data.pageNo = 1;
    }
  }
};
</script>

<style scoped></style>
